<template>
	<vxe-grid ref="gridRef" v-bind="gridOptions">
		<template #action="{row}">
			<a-button type="link" v-action="['mk_device']" size="small" @click="viewDetail(row)">详情</a-button>
			<a-button type="link" v-action="['mk_device']" size="small" @click="openModal(row)">处理</a-button>
		</template>
	</vxe-grid>

	<a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="handleVacancyAlarm">
		<a-form>
			<a-form-item label="原因">
				<a-textarea v-model:value="reasonState.reason" :maxlength="200" show-count />
			</a-form-item>
			<a-alert message="预警从点击确认后第二天重新计算预警周期" banner />
		</a-form>
	</a-modal>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {getVacancyAlarmList, confirmVacancyAlarm} from '@/api/device'
	import {message} from 'ant-design-vue'
	import dayjs from 'dayjs'
	import {computed} from '@vue/reactivity'
	import {microApps} from '@/micros/apps'

	const RENTED_WATER = 4;

	const props = defineProps({
		alarmType: {
			type: Number,
			defalult: 1
		}
	})

	const {modalVisible, modalTitle, handleVacancyAlarm, reasonState, openModal} = useConfirmModal()

	const gridRef = ref()
	/** 刷新表格 */
	const searchEvent = () => {
		const $grid = gridRef.value
		$grid.commitProxy('query')
	}
	const gridOptions = ref<VxeGridProps>({
		align: 'center',
		height: 'auto',
		showOverflow: true,
		rowConfig: {isHover: true},
		columns: [
			{title: '房源地址', field: 'address'},
			{
				title: '发生异常时间',
				width: '200px',
				field: 'alarmTime',
				formatter({cellValue}) {
					if (!cellValue) return '-'
					return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
				}
			},
			{
				title: '持续天数',
				width: '200px',
				field: 'alarmDay',
				formatter({cellValue}) {
					if (!cellValue) return '-'
					return cellValue + '天'
				}
			},
			{
				title: '用水量',
				field: 'amount',
				visible: props.alarmType == RENTED_WATER,
				formatter({cellValue}) {
						if (!cellValue) return '-'
						return cellValue + '吨'
				}
			},
			{
				title: '操作',
				align: 'center',
				width: 150,
				slots: {
					default: 'action'
				}
			}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return getVacancyAlarmList({current, size, alarmType: props.alarmType})
				}
			}
		}
	})

	interface rowItem {
		address: String
		alarmDay: String
		alarmTime: String
		deviceId: String
		id: String
		roomId: String
	}
	const viewDetail = (row: rowItem) => {
		const {roomId, deviceId} = row
		const alarmType = props.alarmType
		const parmasMap = {
			1: {
				props: {
					path: '/lock',
					query: {
						refresh: Date.now(),
						lockId: deviceId,
						roomId
					}
				}
			},
			2: {
				props: {
					path: '/water-meter',
					query: {
						refresh: Date.now(),
						deviceId,
						roomId
					}
				}
			},
			3: {
				props: {
					path: '/electric-meter',
					query: {
						refresh: Date.now(),
						deviceId,
						roomId
					}
				}
			},
			4: {
				props: {
					path: '/water-meter',
					query: {
						refresh: Date.now(),
						deviceId,
						roomId,
						deviceTypes: [1,3]
					}
				}
			}

		}
		microApps.loadApp({
			name: 'device',
			container: document.createElement('div'),
			...parmasMap[alarmType as keyof typeof parmasMap]
		})
	}

	function useConfirmModal() {
		const MODAL_TITLE_MAP = {
			1: '开门次数过多预警处理',
			2: '用电异常预警处理',
			3: '用水异常预警处理',
			4: '用水异常预警处理'
		}

		const modalVisible = ref(false)
		const modalTitle = computed(() => MODAL_TITLE_MAP[props.alarmType])
		const openModal = row => {
			reasonState.value.id = row.id
			reasonState.value.reason = ''
			modalVisible.value = true
		}

		const reasonState = ref({
			id: '',
			reason: ''
		})

		const handleVacancyAlarm = async () => {
			await confirmVacancyAlarm(reasonState.value)
			message.success('处理成功')
			modalVisible.value = false
			searchEvent()
		}

		return {
			modalVisible,
			modalTitle,
			handleVacancyAlarm,
			reasonState,
			openModal
		}
	}
</script>

<style lang="less" scoped></style>
